<template>
	<view class="container">
		<!-- 聊天内容区域 -->
		<scroll-view class="chat-list" scroll-y :scroll-top="scrollTop" :scroll-with-animation="true">
			<view v-for="(item, index) in chatList" :key="index" class="chat-item"
				:class="item.role === 'user' ? 'user' : 'assistant'">
				<view class="content-box">
					<text class="content">{{ item.content }}</text>
					<text class="time">{{ item.time }}</text>
				</view>
				<view v-if="item.loading" class="loading">
					<view class="dot"></view>
					<view class="dot"></view>
					<view class="dot"></view>
				</view>
			</view>
		</scroll-view>

		<!-- 输入区域 -->
		<view class="input-area">
			<input class="input" v-model="inputMessage" placeholder="请输入问题..." @confirm="sendMessage"
				:disabled="isSending" placeholder-class="placeholder" />
			<button class="send-btn" @tap="sendMessage" :disabled="isSending || !inputMessage">
				{{ isSending ? '发送中...' : '发送' }}
			</button>
		</view>
	</view>
</template>

<script>
	// import {fetchDeepSeekStream} from '@/utils/deepseek.js'
	const API_URL = 'https://api.deepseek.com/v1/chat/completions' // 替换为实际API地址
	const API_KEY = 'sk-11578c688b5c457abcb33e052f6c4f21' // 替换为你的API密钥

	export default {
		data() {
			return {
				chatList: [],
				inputMessage: '',
				isSending: false,
				scrollTop: 0,
				typedText:""
			}
		},
		methods: {
			startTyping() {
				let currentIndex = 0;
				const typingSpeed = 100; // 打字速度，单位：毫秒

				const timer = setInterval(() => {
					this.typedText += this.text[currentIndex];
					currentIndex++;

					if (currentIndex >= this.text.length) {
						clearInterval(timer);
					}
				}, typingSpeed);
			},
			async sendMessage() {
				if (!this.inputMessage.trim() || this.isSending) return

				const userMessage = {
					role: 'user',
					content: this.inputMessage,
					time: this.getCurrentTime(),
					loading: false
				}

				// 添加用户消息
				console.log(userMessage)
				this.chatList.push(userMessage)
				this.inputMessage = ''

				// 添加AI的loading状态
				const assistantMessage = {
					role: 'assistant',
					content: '',
					time: '',
					loading: true
				}
				this.chatList.push(assistantMessage)

				this.isSending = true
				this.scrollToBottom()

				try {
					const res = await uni.request({
						url: API_URL,
						method: 'POST',
						header: {
							'Content-Type': 'application/json',
							'Authorization': `Bearer ${API_KEY}`
						},
						data: {
							model: 'deepseek-chat', // 模型
							messages: this.chatList
								.filter(item => !item.loading)
								.map(item => ({
									role: item.role,
									content: item.content
								}))
						}
					})
					
					// 更新AI消息
					const lastIndex = this.chatList.length - 1
					this.chatList[lastIndex] = {
						role: 'assistant',
						content: res.data.choices[0].message.content,
						time: this.getCurrentTime(),
						loading: false
					}

					this.$forceUpdate()
				} catch (error) {
					console.error('API请求失败:', error)
					uni.showToast({
						title: '请求失败，请重试',
						icon: 'none'
					})
					this.chatList.pop() // 移除loading状态的消息
				} finally {
					this.isSending = false
					this.scrollToBottom()
				}
			},

			getCurrentTime() {
				const date = new Date()
				return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
			},

			scrollToBottom() {
				this.$nextTick(() => {
					this.scrollTop = Math.random() * 1000000 // 通过随机数强制滚动到底部
				})
			}
		}
	}
</script>

<style scoped>
	/* 新增修改的样式 */
	.container {
		padding-bottom: 120rpx;
		/* 给输入框留出空间 */
	}

	.chat-list {
		padding: 20rpx 20rpx 160rpx;
		/* 底部留白防止遮挡 */
	}

	.chat-item {
		margin: 30rpx 0;
	}

	.content-box {
		max-width: 75%;
		padding: 20rpx 28rpx;
		border-radius: 16rpx;
		margin: 0 20rpx;
		position: relative;
	}

	.user .content-box {
		background: #1989fa;
		color: white;
		margin-left: auto;
		/* 右对齐关键属性 */
	}

	.assistant .content-box {
		background: #f8f8f8;
		color: #333;
		margin-right: auto;
		/* 左对齐关键属性 */
	}

	.time {
		font-size: 24rpx;
		color: #999;
		position: absolute;
		bottom: -40rpx;
		white-space: nowrap;
	}

	/* 新版加载动画 */
	.loading {
		display: flex;
		align-items: center;
		padding: 20rpx;
	}

	.dot {
		width: 12rpx;
		height: 12rpx;
		background: #ddd;
		border-radius: 50%;
		margin: 0 4rpx;
		animation: bounce 1.4s infinite ease-in-out;
	}

	.dot:nth-child(2) {
		animation-delay: 0.2s;
	}

	.dot:nth-child(3) {
		animation-delay: 0.4s;
	}

	@keyframes bounce {

		0%,
		80%,
		100% {
			transform: translateY(0);
		}

		40% {
			transform: translateY(-10rpx);
		}
	}

	/* 输入区域样式优化 */
	.input-area {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		padding: 20rpx;
		background: #fff;
		border-top: 1rpx solid #eee;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.input {
		flex: 1;
		height: 80rpx;
		padding: 0 28rpx;
		background: #e9e9e9;
		border-radius: 40rpx;
		font-size: 28rpx;
		color: #333;
		border: none;
	}

	.placeholder {
		color: #999;
	}

	.send-btn {
		width: 140rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin-left: 20rpx;
		background: #1989fa;
		color: white;
		border-radius: 40rpx;
		font-size: 28rpx;
		border: none;
	}

	.send-btn[disabled] {
		opacity: 0.6;
		background: blue;
		color: white;
	}
</style>